<template>
  <div class="katal">
    <div class="sc-header" id="sc-navbar-container">
      <div class="sc-header-content">
        <div id="navbar" data-test-tag="navbar-redesign">
          <div class="nav-left-section">
            <div
              data-test-tag="nav-button-container"
              class="nav-button-container"
            >
              <div
                data-test-tag="hamburger-icon"
                tabindex="0"
                aria-label="导航菜单"
                role="button"
                class="nav-button"
              >
                <div
                  role="img"
                  aria-hidden="true"
                  class="nav-button-icon sc-nav-kat-icon sc-nav-kat-icon-hamburger sc-nav-kat-icon-small"
                ></div>
              </div>
            </div>
            <a aria-label="Amazon" role="link" class="logo-container">
              <div id="sc-logo-asset" class="logo-seller-central-NA"></div>
              <div class="logo-container-divider-right"></div>
            </a>
            <div
              data-test-tag="partner-switcher-container"
              class="partner-switcher-container"
            >
              <div>
                <div class="flyoutTriggerWrap">
                  <div data-v-2eb0a110="" id="sc-mkt-switcher-form">
                    <div id="partner-switcher" class="partner-dropdown">
                      <button class="partner-dropdown-button">
                        <span
                          ><b>{{ storeInfo.storeName }}</b> | 美国</span
                        >
                      </button>
                      <div class="dropdown-content">
                        <div class="scrollable-content"></div>
                        <button href="#" class="see-all-btn">查看所有</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flyoutFlyout" style="display: none">
                  <div class="flyoutContentWrap"></div>
                  <div data-popper-arrow="" class="flyoutArrow"></div>
                  <div class="flyoutHoverableArea"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="nav-main-container">
            <div id="sc-global-search" class="nav-search-container">
              <form id="sc-global-search-form" class="nav-redesign-search-form">
                <input
                  id="sc-search-field"
                  type="text"
                  placeholder="搜索"
                  tabindex="0"
                  name="query"
                  class="search-input"
                  autocomplete="off"
                />
                <button
                  data-test-tag="nav-search-button"
                  aria-label="搜索"
                  class="sc-search-button search-icon-container"
                >
                  <div
                    role="img"
                    aria-hidden="true"
                    class="search-icon sc-nav-kat-icon sc-nav-kat-icon-search sc-nav-kat-icon-small"
                  ></div>
                </button>
              </form>
            </div>
          </div>
          <div class="nav-right-section">
            <div class="utility-bar-container">
              <div
                data-test-tag="nav-mail-button"
                class="button-container mail"
              >
                <a class="button-link">
                  <div
                    role="img"
                    class="utility-bar-icon sc-nav-kat-icon sc-nav-kat-icon-mail sc-nav-kat-icon-small"
                  ></div>
                </a>
              </div>
              <div
                data-test-tag="nav-settings-button"
                class="button-container settings"
              >
                <div>
                  <div tabindex="0" aria-label="设置" class="flyoutTriggerWrap">
                    <div
                      role="img"
                      aria-hidden="true"
                      class="utility-bar-icon sc-nav-kat-icon sc-nav-kat-icon-gear sc-nav-kat-icon-small"
                      data-test-tag="settings-menu-trigger"
                    ></div>
                  </div>
                  <div class="flyoutFlyout" style="display: none">
                    <div class="flyoutContentWrap"></div>
                    <div data-popper-arrow="" class="flyoutArrow"></div>
                    <div class="flyoutHoverableArea"></div>
                  </div>
                </div>
              </div>
              <div
                data-test-tag="nav-locale-button"
                class="button-container locale"
              >
                <div>
                  <div tabindex="0" aria-label="语言" class="flyoutTriggerWrap">
                    <div class="locale-icon-wrapper" style="font-size: 14px">
                      ZH
                      <div
                        role="img"
                        aria-hidden="true"
                        class="utility-bar-icon sc-nav-kat-icon sc-nav-kat-icon-arrow_drop_down sc-nav-kat-icon-small"
                      ></div>
                    </div>
                  </div>
                  <div class="flyoutFlyout" style="display: none">
                    <div class="flyoutContentWrap"></div>
                    <div data-popper-arrow="" class="flyoutArrow"></div>
                    <div class="flyoutHoverableArea"></div>
                  </div>
                </div>
              </div>
              <div
                data-test-tag="nav-help-button"
                class="button-container help"
              >
                <a tabindex="0" aria-label="帮助" class="button-link"
                  ><span style="font-size: 14px; color: #fff"> 帮助 </span></a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="favorite-pages-bar">
          <div class="favorite-pages-full">
            <div class='favico-box'>
              <div
                role="img"
                aria-hidden="true"
                class="bbov favorite-pages-full-icon sc-nav-kat-icon sc-nav-kat-icon-bookmark sc-nav-kat-icon-tiny"
              ></div> 
              <div
                role="img"
                aria-hidden="true"
                class="favico-box-co favorite-pages-full-icon sc-nav-kat-icon sc-nav-kat-icon-bookmark sc-nav-kat-icon-tiny"
              ></div>   
            </div>
           
            <div class="favorite-pages-links-root">
              <div
                data-v-721eb639=""
                id="favorite-pages-links-list"
                class="favorite-pages-links-list"
              >
                <span class="link-span" @click="addClick()"> 添加商品 </span
                ><a> 卖家大学 </a>
                ><a> 亚马逊物流库存 </a>
              </div>
            </div>
          </div>
          
          <button
            data-v-579c5f76=""
            class="kat-button kat-button--dark-secondary kat-button--small"
            id="favorite-pages-edit-button"
          >
            编辑
          </button>
        </div>

        <div>
          <div></div>
          <div></div>
          <div data-lock="">
            <div class="side-nav-container">
              <div class="backdrop"></div>
            </div>
          </div>
          <div></div>
        </div>
      </div>
      <div
        id="sidebar-help-panel-container"
        data-enable-meld-sidebar="true"
        data-is-partner-page="false"
      ></div>
    </div>

    <div class="navigation">
      <div class="fba-indicator">
        FBA <span class="fba-central-icons arrow-forward"></span>
      </div>
      <ul class="main-menu">
        <li class="main-item">
          <div class="main-item-link">
            <a>控制面板</a>
          </div>
        </li>

        <li class="active main-item">
          <div class="main-item-link">
            <a>库存</a>

            <span class="fba-central-icons expand-less"></span>
          </div>

          <ul class="sub-menu">
            <li>
              <a>亚马逊物流库存</a>
            </li>

            <li>
              <a>库存绩效</a>
            </li>

            <li>
              <a>补充库存</a>
            </li>

            <li>
              <a>无在售信息的亚马逊库存</a>
            </li>

            <li>
              <a>不可售库存</a>
            </li>

            <li>
              <a>亚马逊物流退货</a>
            </li>
          </ul>
        </li>

        <li class="main-item">
          <div class="main-item-link">
            <a>货件</a>

            <span class="fba-central-icons expand-less"></span>
          </div>

          <ul class="sub-menu">
            <li>
              <a>管理货件</a>
            </li>

            <li>
              <a>Send to Amazon</a>
            </li>

            <li>
              <a>货件绩效</a>
            </li>
          </ul>
        </li>

        <li class="main-item">
          <div class="main-item-link">
            <a>机会</a>
          </div>
        </li>

        <li class="main-item">
          <div class="main-item-link">
            <a>分析</a>
          </div>
        </li>
      </ul>
    </div>

    <div class="page-header-box">
      <div class="page-header">
        <div class="item">
          <h2>亚马逊物流库存</h2>
          <button class="clear-btn-styles">
            <a target="_blank" variant="link" label="">了解更多信息</a></button
          ><span class="sperator">|</span
          ><button class="clear-btn-styles">
            <a iphmdtrigger="" variant="link" label="为此页评级"
              >为此页评级</a
            ></button
          ><span class="sperator">|</span
          ><button class="clear-btn-styles">
            <a target="_blank" variant="link" label=" ">
              返回“管理亚马逊库存”
            </a>
          </button>
        </div>
        <div class="item right">
          <div class="go-to">
            <!-- <kat-label variant="default" text="前往"> -->
            <span class="label-text"
              ><label> <span>前往</span></label></span
            >
            <!-- </kat-label> -->
            <div>
              <div class="kat-select-container" title="">
                <div
                  class="select-header"
                  part="dropdown-header"
                  id="katal-id-0"
                  tabindex="0"
                >
                  <div class="header-row">
                    <div class="header-row-text placeholder">
                      <div class="selection-text hidden">
                        <slot name="selected-option"></slot>
                      </div>
                      <div class="placeholder-text">
                        <slot name="placeholder">配送报告</slot>
                      </div>
                      <div class="header-row-overflow"></div>
                    </div>
                    <span style="position:relative">
                     <span
                      class="fba-central-icons expand-less id-icon bbov"
                    
                      ></span
                    >
                    <span
                      class="fba-central-icons expand-less id-icon bbovkk"
                    
                      ></span
                    >
                    </span>
                   
                    <!-- <div class="indicator">
                        <i aria-hidden="true"></i>
                    </div> -->
                  </div>
                </div>
                <span class="ring"></span>
                <!-- <div class="select-options" part="dropdown-options">
                  <div class="option-inner-container">
                    <slot name="select-header"></slot>
                    <div>
                      <slot role="listbox"
                        >
                        <kat-option
                          tabindex="-1"
                          part="dropdown-option0"
                          value="/reportcentral/MANAGE_INVENTORY_HEALTH/1"
                          aria-selected="false"
                          role="option"
                        >
                          <div class="standard-option-content">
                            <div class="standard-option-name">
                              亚马逊物流库存
                            </div>
                            <div class="standard-option-icon">

                            </div>
                          </div>
                        </kat-option>
                        </slot
                      >
                    </div>
                    <slot name="select-footer"></slot>
                  </div>
                </div> -->
              </div>
              <div class="metadata"></div>
              <span
                style="max-width: 0px; max-height: 0px; overflow: hidden"
              ></span>
            </div>
            <div class="component" id="autoSettingsOptions">
              <span class="vertical-bar">|</span
              ><button class="clear-btn-styles">
                <a target="_blank" variant="link" label="">
                  长期仓储费自动移除（如适用）
                </a>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="kat-alert" _ngcontent-xhv-c5="" size="large" variant="info">
        <!-- <template shadowrootmode="open"> -->
        <div class="katal-icon" >
          <i aria-hidden="true" style="vertical-align: middle;" class="ione1"></i>
        </div>
        <!-- <kat-icon class="icon" name="info-circle" size="large"
          >
          <template shadowrootmode="open"
            ></template
          ></kat-icon
        > -->
        <div class="content">
          <div class="header">
            <slot name="header"> </slot>
          </div>
          <div class="description">
            <slot></slot>
          </div>
        </div>
        <div class="empty cta">
          <slot name="cta"></slot>
        </div>

        <div class="flex1">
          <div class="kat-alert-header">{{ storeInfo.storeTip }}</div>
          <div _ngcontent-xhv-c5="">
            {{ storeInfo.storeDesc }}
            <!-- 根据亚马逊的内部数据，遵循建议推出奥特莱斯限时促销的卖家，其相关商品的销量在接下来
            4 周平均提高了 93%。
            -->
            <a target="_blank">了解更多信息</a>。
          </div>
        </div>
        <div class="katal-icon" style="margin-top:-15px">
          <i aria-hidden="true" style="font-size: 19px;"></i>
        </div>
      </div>

      <div class="search-and-buttons">
        <div class="inner search-input-box">
          <input
            class="search-box search-input"
            type="search"
            v-model="searchInput"
            placeholder="按 SKU、ASIN 或任何商品详情搜索 "
          />
          <!-- <span slot="private-light-dom" style="max-width: 0px; max-height: 0px; overflow: hidden;"></span> -->
          <!-- </input> -->
          <button class="search-button">
            <div class="katal-icon">
              <i aria-hidden="true"></i>
            </div>
          </button>
        </div>
        <section class="buttons">
          <div class="buttons cursor">
            <div class="kat-link">下载报告</div>
            <span>|</span>
            <div class="preference kat-link">
              <div class="katal-icon setting" style="position:relative">
                <i aria-hidden="true" class="kat-link set-icony"></i>
                <i aria-hidden="true" class="kat-link bbov"></i>
              </div>
              <span class="table-preference-text"> 表格首选项 </span>
            </div>
          </div>
        </section>
      </div>

      <section class="filter" style="height:auto">
        <div class="filter-selection">
          <div class="label" style='margin-left:0px'>
            <kat-label variant="default" text="筛选条件"
              ><span slot="private-light-dom"
                ><label> <span part="label-text" style="color: #21464c;">筛选条件</span></label></span
              ></kat-label
            >
          </div>
          <div class="filter-dropdown">
            <div class="dropdown">
              <div class="kat-popover">
                <div class="kat-link">
                  推荐
                  <span class="katal-icon yyiconb">
                    <i aria-hidden="true" class="filter-ico yyivo"></i>
                    <i aria-hidden="true" class="filter-ico yyivot"></i>
                  </span>
                </div>

                <!-- <div class="panel">
                  <kat-checkbox label="创建商品推广广告"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="创建奥特莱斯限时促销"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="创建奥特莱斯降价促销"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="创建移除订单"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="创建促销"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="编辑商品信息"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="前往“修复无在售信息的亚马逊库存”"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="改进关键词"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="降低商品价格"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="无需操作"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="补充库存"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span
                  ></kat-checkbox></div> -->
              </div>

              <span class="sperator">|</span>
            </div>
            <div class="dropdown">
              <div class="kat-popover">
                <div class="kat-link">
                  入库
                  <span class="katal-icon yyiconb">
                    <i aria-hidden="true" class="filter-ico yyivo"></i>
                    <i aria-hidden="true" class="filter-ico yyivot"></i>
                  </span>
                </div>
                <!-- <div class="panel">
                  <kat-checkbox label="处理中"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="已发货"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="正在接收"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span
                  ></kat-checkbox></div> -->
              </div>
              <span class="sperator">|</span>
            </div>
            <div class="dropdown">
              <div class="kat-popover">
                <div class="kat-link">
                  库龄
                  <span class="katal-icon yyiconb">
                    <i aria-hidden="true" class="filter-ico yyivo"></i>
                    <i aria-hidden="true" class="filter-ico yyivot"></i>
                  </span>
                </div>
                <!-- <div class="panel">
                  <kat-checkbox label="0-60 天"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="61-90 天"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="91-180 天"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="181-330 天"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="331-365 天"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="365+ 天"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span
                  ></kat-checkbox></div> -->
              </div>
              <span class="sperator">|</span>
            </div>
            <div class="dropdown" style="width: 102px">
              <div class="kat-popover" style="width: 76px">
                <div class="kat-link">
                  仓储类型
                  <span class="katal-icon yyiconb">
                    <i aria-hidden="true" class="filter-ico yyivo"></i>
                    <i aria-hidden="true" class="filter-ico yyivot"></i>
                  </span>
                </div>
                <!-- <div class="panel">
                  <kat-checkbox label="气溶胶"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="服装"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="易燃物"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="鞋靴"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="大件商品"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="标准尺寸商品"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="特大尺寸商品"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span
                  ></kat-checkbox></div> -->
              </div>
              <span class="sperator">|</span>
            </div>
            <div class="dropdown" style="width: 102px">
              <div class="kat-popover" style="width: 76px">
                <div class="kat-link">
                  商品状况
                  <span class="katal-icon yyiconb">
                    <i aria-hidden="true" class="filter-ico yyivo"></i>
                    <i aria-hidden="true" class="filter-ico yyivot"></i>
                  </span>
                </div>

                <!-- <div class="panel">
                  <kat-checkbox label="新品"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="二手"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="收藏品"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="翻新商品"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="俱乐部版"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span
                  ></kat-checkbox></div> -->
              </div>
              <span class="sperator">|</span>
            </div>
            <div class="dropdown" style="width: 102px">
              <div class="kat-popover" style="width: 76px">
                <div class="kat-link">
                  激励类型
                  <span class="katal-icon yyiconb">
                    <i aria-hidden="true" class="filter-ico yyivo"></i>
                    <i aria-hidden="true" class="filter-ico yyivot"></i>
                  </span>
                </div>

                <!-- <div class="panel">
                  <kat-checkbox label="可用激励"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span></kat-checkbox
                  ><kat-checkbox label="已注册的激励"
                    ><span
                      slot="private-light-dom"
                      style="max-width: 0px; max-height: 0px; overflow: hidden"
                    ></span
                  ></kat-checkbox></div> -->
              </div>
              <span class="sperator">|</span>
            </div>
          </div>
          <div class="after-filters d-flex">
            <div class="kat-label"  style="color: #21464c;margin-right: 5px">
              按库龄排序
              <!-- <span part="label-text"></span> -->
            </div>

            <div class="kat-select-container" title="">
              <div
                class="select-header"
                id="katal-id-0"
                style="background: #fff; cursor: pointer"
                tabindex="0"
              >
                <div class="header-row">
                  <div class="header-row-text placeholder">
                    <div class="selection-text hidden">
                      <slot name="selected-option"> </slot>
                    </div>
                    <div class="placeholder-text" style="color: #778484">
                      <slot name="placeholder"> 未排序 </slot>
                    </div>
                    <div class="header-row-overflow"></div>
                  </div>
                  <div class="indicator">
                    <span class="katal-icon fba-central-icons">
                      <i
                        class='bbovy'
                        style="color: #899798; margin-left: 10px"
                        ></i>

                       <i
                        class='bbov'
                        style="color: #899798; margin-left: 10px"
                        ></i>
                    </span>
                  </div>
                </div>
              </div>
              <!-- <span class="ring"></span> -->
              <!-- <div class="select-options" part="dropdown-options">
                <div class="option-inner-container">
                  <slot name="select-header"></slot>
                  <div>
                    <slot role="listbox">
                      <kat-option tabindex="-1" part="dropdown-option0" value="/reportcentral/MANAGE_INVENTORY_HEALTH/1"
                        aria-selected="false" role="option"><template shadowrootmode="open">
                          <div class="content-wrapper">
                            <div class="content">
                              <slot></slot>
                            </div> <span class="ring"></span>
                          </div>
                        </template>
                        <div class="standard-option-content">
                          <div class="standard-option-name">
                            亚马逊物流库存
                          </div>
                          <div class="standard-option-icon">

                          </div>
                        </div>
                      </kat-option>
                    </slot>
                  </div>
                  <slot name="select-footer"></slot>
                </div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="selected-filters">
          <div class="label" style='margin-left:0px'>
            <div variant="default" text="已选筛选条件">
              <span slot="private-light-dom"
                ><label>
                  <span part="label-text" style="color: #21464c;">已选筛选条件</span></label
                ></span
              >
            </div>
          </div>
          <div class="kat-link">清除筛选条件</div>
          <!-- <kat-link variant="link" label="清除筛选条件"></kat-link> -->
        </div>
      </section>
      <!-- style="width:2123px" -->
      <div class="meTable" role="table" style="min-width:2160px">
        <div class="sticky-header" role="rowgroup">
          <div role="row">
            <!-- <td colspan="100"> -->
            <!-- <ipv2-table-overview _nghost-uyj-c12=""> -->
            <div class="table-overview">
              <div class="left-container">
                <div class="total-skus">
                  <div class="kat-label" style="color: #21464c;">
                    总计：{{ totalCount }} 个 SKU
                    <span slot="private-light-dom">
                      <!-- <label>总计：0 个 SKU</label> -->
                    </span>
                  </div>
                </div>
                <span class="separator">|</span>
                <div class="bulk-actions d-flex">
                  <div class="kat-label kat-label2" style="color: #21464c;">
                    批量操作
                  </div>
                  <span class="katal-icon">
                    <i aria-hidden="true" style="color: rgb(0, 130, 150)"></i>
                  </span>

                  <div class="kat-dropdown" style="margin-left: 10px">
                    <div class="kat-select-container" title="">
                      <div
                        class="select-header"
                        part="dropdown-header"
                        id="katal-id-79"
                        style="background-color: rgb(244, 246, 246);"
                      >
                        <div class="header-row" >
                          <div class="header-row-text placeholder">
                            <div class="selection-text hidden">
                              <slot name="selected-option"></slot>
                            </div>
                            <div
                              class="placeholder-text"
                              style="color: rgb(102, 117, 117)"
                            >
                              <slot name="placeholder">已选择 0 件商品</slot>
                            </div>
                            <div class="header-row-overflow"></div>
                          </div>
                          <div class="indicator" style="position:relative">
                            <span class="katal-icon fba-central-icons">
                              <i
                                aria-hidden="true"
                                class="jjjbicvo"
                                style="color: #899798; margin-left: 10px"
                                ></i
                              >
                               <i
                                aria-hidden="true"
                                class="bbov"
                                style="color: #899798;"
                                ></i
                              >
                            </span>
                            <!-- <kat-icon size="small" name="chevron-down"></kat-icon>  -->
                          </div>
                        </div>
                      </div>
                      <span class="ring"></span>
                      <!-- <div class="select-options" part="dropdown-options">
                            <div class="option-inner-container">
                              <slot name="select-header"></slot>
                              <div>
                                <slot role="listbox"> <kat-option tabindex="-1" part="dropdown-option0"
                                    value="create_removal_order" aria-selected="false" role="option">
                                    <div class="standard-option-content">
                                      <div class="standard-option-name">创建移除订单</div>
                                      <div class="standard-option-icon"></div>
                                    </div>
                                  </kat-option>  <kat-option tabindex="-1" part="dropdown-option1"
                                    value="send_replenish_inventory" aria-selected="false" role="option">
                                    <div class="standard-option-content">
                                      <div class="standard-option-name">发/补货</div>
                                      <div class="standard-option-icon"></div>
                                    </div>
                                  </kat-option>  <kat-option tabindex="-1" part="dropdown-option2"
                                    value="print_item_label" aria-selected="false" role="option">
                                    <div class="standard-option-content">
                                      <div class="standard-option-name">打印商品标签</div>
                                      <div class="standard-option-icon"></div>
                                    </div>
                                  </kat-option>  <kat-option tabindex="-1" part="dropdown-option3"
                                    value="create_sale" aria-selected="false" role="option">
                                    <div class="standard-option-content">
                                      <div class="standard-option-name">创建促销</div>
                                      <div class="standard-option-icon"></div>
                                    </div>
                                  </kat-option>  <kat-option tabindex="-1" part="dropdown-option4"
                                    value="set_replenishment_alert" aria-selected="false" role="option">
                                    <div class="standard-option-content">
                                      <div class="standard-option-name">设置补货提醒</div>
                                      <div class="standard-option-icon"></div>
                                    </div>
                                  </kat-option> </slot>
                              </div>
                              <slot name="select-footer"></slot>
                            </div>
                          </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- </ipv2-table-overview> -->
            <!-- </td> -->
          </div>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              type="selection"
              width="43.5"
              align="center"
              fixed="left"
            />
            <el-table-column
              prop="date"
              label="商品详情"
              width="277.5"
              fixed="left"
            >
              <template #header="scope">
                <!-- {{ scope.$index }} -->
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1">
                    商品详情
                    <div
                      style="margin-top: 12px"
                      class="footer ipv2-single-line ng-star-inserted"
                    >
                    <!-- font-weight: normal; -->
                      <span
                        class="sort-text"
                        style=" color: rgb(0, 47, 54);font-size:12px;font-weight: 500;"
                      >
                        排序: 商品名称
                      </span>
                    </div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    style="padding-top:0;margin-top:-16px"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>

              <template #default="scope">
                <div class="content-cols2"  style="height:auto">
                  <div class="product-details ng-star-inserted">
                    <div class="image ng-star-inserted">
                      <el-image
                        alt=""
                        :src="scope.row.LINK"
                        style="width: 60px; height: 60px;margin-top: 9px"
                      />
                    </div>
                    <div class="info">
                      <div class="name2 ng-star-inserted">
                        <span style="color: rgb(0, 130, 150);word-break: keep-all">
                          {{ scope.row.TITLE }}
                          <!-- UMUACCAN Cooling Fan Indoor, 1500W Portable Electric
                          Heater Fast Heating Ceramic Electric Heater with
                          Remote, Overheating &amp; Tip-Over Protection Hot/Cold
                          Fan -->
                        </span>
                      </div>

                      <div class="ng-star-inserted">
                        <span class="key">ASIN: </span
                        ><span class="value" >{{ scope.row.ASIN }}</span>
                      </div>

                      <div class="ng-star-inserted">
                        <span class="key">FNSKU: </span
                        ><span class="value">{{ scope.row.FNSKU }}</span>
                      </div>

                      <div class="ng-star-inserted">
                        <span class="key">SKU: </span
                        ><span class="value" ><span style="color: rgb(0, 130, 150)">{{
                            scope.row.SKU
                          }}</span>
                        </span>
                      </div>

                      <div class="ng-star-inserted">
                        <span class="key">UPC/EAN: </span
                        ><span class="value" >{{ scope.row.UPCEAN }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="销售情况一览" :width="flexColumnWidth(122,'saleWidth')">
              <template #header="scope">
                <!-- {{ scope.$index }} -->

                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1">
                    <div>销售情况一览</div>
                    <div class="table-header-row-info">最近 <span style="margin:0 1px">90</span> 天</div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <div class="sales-summary ng-star-inserted">
                    <div>
                      <span class="ng-star-inserted tyg" style="margin-left: 0;">{{
                        scope.row.US2
                      }}</span>
                    </div>
                    <div class="sales-units">
                      <span class="ng-star-inserted tyg" style="margin-left: 0;"
                        >{{ scope.row.quantity }}件</span
                      >
                    </div>
                    <div class="kat-popover">
                      <div class="kat-link col-txt2">详情</div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="售出率" width="151">
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1">
                    <div class="db">
                      售出率
                      <div class="katal-icon" style="margin-left: 3px;">
                        <i aria-hidden="true" class="p-icon"></i>
                      </div>
                    </div>
                    <div class="table-header-row-info">最近 <span style="margin:0 1px">90</span> 天</div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>

              <template #default="scope">
                <div class="content-cols2">
                  <div class="sales-units">
                    <span class="ng-star-inserted tyg"  style="margin-left: 0;">{{
                      scope.row.soldRateOne
                    }}</span>
                  </div>
                  <span class="ng-star-inserted">
                    <span class="ipv2-increase yut ng-star-inserted"
                      >+{{ scope.row.soldRateTwo }}</span
                    ></span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="可用" width="104">
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1 db">
                    可用
                    <div class="katal-icon" style="margin-left: 3px;">
                      <i aria-hidden="true" class="p-icon"></i>
                    </div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <span class="ng-star-inserted"
                    ><span class="ipv2-increase oio ng-star-inserted tyg">{{
                      scope.row.useNumber
                    }}</span></span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="入库数量" width="155">
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1 db">
                    入库数量
                    <div class="katal-icon" style="margin-left: 3px;">
                      <i aria-hidden="true" class="p-icon"></i>
                    </div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <div class="ng-star-inserted usebox">
                    <div class="kat-list" variant="unordered" role="list">
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>总额:</span
                        ><span class="value ng-star-inserted tyg ghn">
                          {{ scope.row.receiptQuantityTotal }}
                        </span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>处理中:</span>
                        <span class="ng-star-inserted tyg tygbox ghn">
                          <span class="bbov">--</span>
                          <span class="tyg-txt">--</span>
                        </span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>已发货:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.receiptQuantitySend
                        }}</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>正在接收:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.receiptQuantityReceive
                        }}</span>
                      </li>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ylnumber" label="预留数量" :width="flexColumnWidth(176,'ylnumber')">
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1 db">
                    预留数量
                    <div class="katal-icon" style="margin-left: 3px;">
                      <i aria-hidden="true" class="p-icon"></i>
                    </div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <!-- 总额: 0
买家订单: 0
亚马逊运营中心转运: 0
亚马逊运营中心处理中: 0 -->
              <template #default="scope">
                <div class="content-cols2">
                  <div class="ng-star-inserted usebox">
                    <div class="kat-list" variant="unordered" role="list">
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>总额:</span
                        ><span class="value ng-star-inserted tyg ghn">
                          {{ scope.row.reservedQuantityReceive }}
                        </span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>买家订单:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.reservedQuantityReceiveBuy
                        }}</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>亚马逊运营中心转运:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.reservedQuantityReceiveYMX
                        }}</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>亚马逊运营中心处理中:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.reservedQuantityReceiveYMXIng
                        }}</span>
                      </li>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="不可售" :width="flexColumnWidth(163,'address')">
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1 db">
                    不可售
                    <div class="katal-icon" style="margin-left: 3px;">
                      <i aria-hidden="true" class="p-icon"></i>
                    </div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>

              <!-- 总额: 0
在库房出现残损: 0
买家导致残损: 0
因承运人导致的残损: 0
因分销商导致的残损: 0
存在瑕疵: 0
已过期: 0 -->
              <template #default="scope">
                <div class="content-cols2" style="padding-left:12px">
                  <div class="ng-star-inserted usebox">
                    <div class="kat-list" variant="unordered" role="list">
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>总额:</span
                        ><span class="value ng-star-inserted tyg ghn">
                          {{ scope.row.NotAvailableTotal }}
                        </span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>在库房出现残损:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.NotAvailableTotalQc
                        }}</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>买家导致残损:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.NotAvailableTotalBugQc
                        }}</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>因承运人导致的残损:</span
                        ><span class="ng-star-inserted tyg ghn">
                          <template v-if="scope.row.temp002 === ''">
                            0
                          </template>
                          <template v-else>
                            {{ scope.row.temp002 }}
                          </template>
                        </span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>因分销商导致的残损:</span
                        ><span class="ng-star-inserted tyg ghn">
                          <template v-if="scope.row.temp003 === ''">
                            0
                          </template>
                          <template v-else>
                            {{ scope.row.temp003 }}
                          </template>
                        </span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>存在瑕疵:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.NotAvailableTotalCZX
                        }}</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>已过期:</span
                        ><span class="ng-star-inserted tyg ghn">
                          <template v-if="scope.row.temp004 === ''">
                            0
                          </template>
                          <template v-else>
                            {{ scope.row.temp004 }}
                          </template>
                        </span>
                      </li>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="库龄" :width="flexColumnWidth(132,'kuling')">
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1">
                    <div class="db">
                      库龄
                      <div class="katal-icon" style="margin-left: 3px;">
                        <i aria-hidden="true" class="p-icon"></i>
                      </div>
                    </div>

                    <div class="table-header-row-info">天</div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>

              <template #default="scope">
                <div class="content-cols2">
                  <div class="ng-star-inserted usebox">
                    <div class="kat-list" variant="unordered" role="list">
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>0-60:</span
                        ><span class="value ng-star-inserted tyg ghn">
                          {{ scope.row.stockage06 }}
                        </span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>61-90:</span
                        ><span class="ng-star-inserted tyg ghn">{{
                          scope.row.stockage69
                        }}</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>91-180:</span
                        ><span class="ng-star-inserted tyg ghn">0</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>181-330:</span
                        ><span class="ng-star-inserted tyg ghn">0</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>331-365:</span
                        ><span class="ng-star-inserted tyg ghn">0</span>
                      </li>
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>365+:</span
                        ><span class="ng-star-inserted tyg ghn">0</span>
                      </li>
                      <div class="kat-popover">
                        <div class="kat-link col-txt2">详情</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="预计冗余商品数量"
              width="139"
            >
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1">
                    预计冗余商品数量
                    <div class="katal-icon">
                      <i aria-hidden="true" class="p-icon"></i>
                    </div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <span class="ng-star-inserted"
                    ><span class="ipv2-increase oio ng-star-inserted tyg">
                      <template v-if="scope.row.temp005 === ''"> 0 </template>
                      <template v-else>
                        {{ scope.row.temp005 }}
                      </template>
                    </span></span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="预计超龄库存附加费"
              width="149"
            >
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1">
                    预计超龄库存附加费
                    <div class="katal-icon">
                      <i aria-hidden="true" class="p-icon"></i>
                    </div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <div class="ng-star-inserted usebox">
                    <div class="kat-list" variant="unordered" role="list">
                      <li class="ipv2-single-line utyy" role="listitem">
                        <span>总额:</span>
                        <span class="value ng-star-inserted tyg tygbox ">
                          <template v-if="scope.row.temp006 === ''">
                            <span class="bbov">--</span>
                            <span class="tyg-txt">--</span>
                          </template>
                          <template v-else>
                            {{ scope.row.temp006 }}
                          </template>
                        </span>
                      </li>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="每件售出商品预计费用"
              width="130"
            >
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1" style="color: #012f36">
                    每件售出商品预计费用
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <div class="ng-star-inserted usebox">
                    <div class="kat-list" variant="unordered" role="list">
                      <li class="ipv2-single-line utyy tyg tygbox" role="listitem">
                        <span v-if="scope.row.temp007 === ''">
                          <span class="bbov">--</span>
                          <span class="tyg-txt">--</span>
                        </span>
                        <span v-else>{{ scope.row.temp007 }}</span>

                        <!-- <span class="value ng-star-inserted"> 0 </span> -->
                      </li>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="您的商品价格" width="168">
              <template #header="scope">
                <div
                  class="table-header-row"
                  @click="toggleActive(scope.$index)"
                  :class="{
                    active: activeIndex === scope.$index,
                  }"
                >
                  <div class="table-header-row-flex1">
                    <div class="d-flex" style="color: rgb(1, 47, 54)">
                      您的商品价格
                      <div class="katal-icon" style="margin-left: 3px">
                        <i aria-hidden="true" class="p-icon"></i>
                      </div>
                    </div>

                    <div class="table-header-row-info">最低价格 + 运费</div>
                  </div>

                  <div
                    class="katal-icon table-tool"
                    v-if="activeIndex === scope.$index"
                  >
                    <i aria-hidden="true" class="table-icon"></i>
                  </div>
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <!-- <span class="ng-star-inserted">{{ scope.row.price }}</span> -->
                  <el-input
                    v-model="scope.row.price"
                    type="number"
                    min="0"
                    class="t-input"
                    disabled
                    placeholder=""
                  >
                    <!-- @input="inputPrice(scope)" -->
                    <template #prepend>
                      <span class="t-prepend">$</span>
                    </template>
                  </el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" >
              <template #header>
                <div class="table-header-row">
                  <div
                    class="table-header-row-flex1"
                    style="color: rgb(1, 47, 54)"
                  >
                    操作
                  </div>

                  <!-- <div class="katal-icon table-tool">
                    <i aria-hidden="true" class="table-icon"></i>
                  </div> -->
                </div>
              </template>
              <template #default="scope">
                <div class="content-cols2">
                  <div class="elselectbox" style="margin-top: 0">
                    <el-select
                      v-model="scope.row.clickType"
                      placeholder=""
                      style="width: 172px"
                      class="meSelect bg-select"
                    >
                      <el-option
                        v-for="item in ClickOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <div
                      class="select-mask"
                      @click="clickFn(scope.row.clickType, scope.row)"
                    ></div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="el-pagination-box" >
            <el-pagination
              :total="totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
            />

            <div
              class="elselectbox el-pagination-select"
              style="margin-right: 10px"
            >
              <el-select
                v-model="pageSize"
                placeholder=""
                style="width: 172px; height: 34px"
                @change="changeSize()"
                class="meSelect buyy"
              >
                <el-option
                  v-for="item in pageSizeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!-- <div class="select-mask" ></div> -->
            </div>
          </div>
        </div>
      </div>

      <footerCom></footerCom>
    </div>

    <add
      :visible="addVisible"
      :updatecount="updatecount"
      :initData="initData"
      @close="closeAdd"
      @update="updateTT"
    ></add>

    <!-- <div style="width:2123px;height:10px"></div> -->
  </div>
</template>

<script>
import footerCom from "./components/footer.vue";
import add from "./add.vue";

import { appState } from "@/store/index";
const appstate = appState();
import { errorInfo } from "@/utils/util";

// import katList from './kat-list.vue'
export default {
  components: {
    footerCom,
    add,
    // katList
  },
  data() {
    return {
      initData: null,
      updatecount: 0,
      addVisible: false,

      languageOptions: [
        {
          label: "English",
          value: 1,
        },
        {
          label: "中文(简体)",
          value: 2,
        },
      ],
      languageValue: 2,
      currentPage: 1,
      pageSize: 20,
      pageSizeOption: [
        {
          label: "每页显示2个结果",
          value: 2,
        },
        {
          label: "每页显示10个结果",
          value: 10,
        },
        {
          label: "每页显示20个结果",
          value: 20,
        },
        {
          label: "每页显示50个结果",
          value: 50,
        },
        {
          label: "每页显示100个结果",
          value: 100,
        },
        {
          label: "每页显示250个结果",
          value: 250,
        },
      ],
      ClickOptions: [
        // {
        //   label: "创建多渠道配送订单",
        //   value: 1,
        // },
        // {
        //   label: "改进关键词",
        //   value: 2,
        // },
        // {
        //   label: "创建商品推广活动",
        //   value: 3,
        // },
        // {
        //   label: "降低商品价格",
        //   value: 4,
        // },
        // {
        //   label: "创建移除订单",
        //   value: 5,
        // },
        // {
        //   label: "发/补货",
        //   value: 6,
        // },
        // {
        //   label: "打印商品标签",
        //   value: 7,
        // },
        // {
        //   label: "设置补货提醒",
        //   value: 8,
        // },
        {
          label: "编辑商品信息",
          value: 0,
        },
        {
          label: "删除该商品",
          value: 1,
        },
      ],
      activeIndex: 1,
      tableData: [
        // {
        //   clickType: 0,
        //   date: "2016-05-03",
        //   name: "Tom",
        //   address: "No. 189, Grove St, Los Angeles",
        // },
      ],
      totalCount: 0,
      searchInput: "",
    };
  },
  computed: {
    storeInfo() {
      return appstate.storeInfo;
    },
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    flexColumnWidth(width, prop) {
      //  8px
        let size = 0;


      if(prop === 'address'){
        for(let i=0;i<this.tableData.length;i++){
          console.log('kk,,,',this.tableData[i])
          let len = 0;

          // 5
          let NotAvailableTotalQc = (this.tableData[i].NotAvailableTotalQc + '').length - 4
          let NotAvailableTotalBugQc = (this.tableData[i].NotAvailableTotalBugQc + '').length - 6
          let temp002 = (this.tableData[i].temp002 + '').length
          let temp003 = (this.tableData[i].temp003 + '').length;
          let NotAvailableTotalCZX = (this.tableData[i].NotAvailableTotalCZX + '').length - 10;
          let temp004 = (this.tableData[i].temp004 + '').length - 10;

          // if(NotAvailableTotalQc)
          len = NotAvailableTotalQc
          if(NotAvailableTotalBugQc > len){
            len = NotAvailableTotalBugQc
          }
          if(temp002 > len){
            len = temp002
          }
          if(temp003 > len){
            len = temp003
          }
          if(NotAvailableTotalCZX > len){
            len = NotAvailableTotalCZX
          }
          if(temp004 > len){
            len = temp004
          }

          if(len > size){
            size = len
          }

        }
      } else if(prop === 'ylnumber'){
        for(let i=0;i<this.tableData.length;i++){
         
          let len = 0;

          let reservedQuantityReceive = (this.tableData[i].reservedQuantityReceive + '').length - 14
          let reservedQuantityReceiveBuy = (this.tableData[i].reservedQuantityReceiveBuy + '').length - 11
          let reservedQuantityReceiveYMX = (this.tableData[i].reservedQuantityReceiveYMX + '').length - 3
          let reservedQuantityReceiveYMXIng = (this.tableData[i].reservedQuantityReceiveYMXIng + '').length - 1


          if(reservedQuantityReceive > len){
            len = reservedQuantityReceive
          }

          if(reservedQuantityReceiveBuy > len){
            len = reservedQuantityReceiveBuy
          }

          if(reservedQuantityReceiveYMX > len){
            len = reservedQuantityReceiveYMX
          }

          if(reservedQuantityReceiveYMXIng > len){
            len = reservedQuantityReceiveYMXIng
          }

          if(len > size){
            size = len
          }




        }
      } else if(prop === 'saleWidth'){

      } else if(prop === 'kuling'){
         for(let i=0;i<this.tableData.length;i++){
         
          let len = 0;

          let reservedQuantityReceive = (this.tableData[i].reservedQuantityReceive + '').length - 14
          let reservedQuantityReceiveBuy = (this.tableData[i].reservedQuantityReceiveBuy + '').length - 11
          let reservedQuantityReceiveYMX = (this.tableData[i].reservedQuantityReceiveYMX + '').length - 3
          let reservedQuantityReceiveYMXIng = (this.tableData[i].reservedQuantityReceiveYMXIng + '').length - 1


          if(reservedQuantityReceive > len){
            len = reservedQuantityReceive
          }

          if(reservedQuantityReceiveBuy > len){
            len = reservedQuantityReceiveBuy
          }

          if(reservedQuantityReceiveYMX > len){
            len = reservedQuantityReceiveYMX
          }

          if(reservedQuantityReceiveYMXIng > len){
            len = reservedQuantityReceiveYMXIng
          }

          if(len > size){
            size = len
          }




        }
      }

      console.log('size',size)

      return width + (8 * (size - 0))


        // const arr = this.tableData.map(x => x[prop])
        // if(arr.length>0){
        //     arr.push(label)  
        //     return (this.getMaxLength(arr) + 25) + 'px'
        // }
        // return 25+'px';
    },
    updateTT() {
      this.getTableData();
    },
    clickFn(type, row) {
      const that = this;
      if (type === 0) {
        this.initData = [row];
        this.addVisible = true;
        this.$nextTick(() => {
          this.updatecount += 1;
        });
      } else if (type === 1) {
        this.$confirm("是否移除当前商品?", "提示", {
          type: "Warning",
          callback: function (is) {
            console.log("is", is);
            if (is === "confirm") {
              // that.initParams(row, that);
              appstate.deleteGood(row);

              that.getTableData();
              successInfo("删除成功");
            }
          },
          // icon: markRaw(Delete),
        });
        // errorInfo("只支持单一条目编辑");
      }
    },
    changeSize() {
      this.getTableData();
    },
    // 获取表格数据
    getTableData() {
      const params = {
        size: this.pageSize,
        current: this.currentPage,
      };

      const res = appstate.getDataList(params);
      const list = JSON.parse(JSON.stringify(res.data));
      // const list = [];

      for (let i = 0; i < res.data.length; i++) {
        list[i].clickType = 0;
        let tt = (list[i].US - 0).toLocaleString();
        list[i].US2 = "US$" + tt;
      }

      this.tableData = list;

      if (list.length !== 0) {
        this.searchInput = list[0].ASIN;
      }
      this.totalCount = res.total;
    },
    addClick() {
      this.addVisible = true;
      this.initData = [];
      this.$nextTick(() => {
        this.updatecount += 1;
      });
    },
    closeAdd(type) {
      if (type === "query") {
        this.getTableData();
      }
      this.addVisible = false;
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getTableData();
    },
    inputPrice(scope) {
      if (scope.row.price === "") {
        scope.row.price = 0;
      }
    },
    toggleActive(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style lang='scss' scoped>
@import "./css/common.scss";
@import "./css/header.scss";
@import "./css/index.scss";
@import "./css/tag.scss";
@import "./css/search.scss";
@import "./css/filter.scss";
@import "./css/table.scss";
@import "./css/table-col.scss";
@import "./css/pagination.scss";


.tygbox{
  position:relative
}

.tyg-txt{
  position: absolute;
    top: -1px;
    left: 1px;
    font-size: 13px;
    width: 40px;
    // font-weight: 550;
}

.favico-box{
  position:relative;

  .favico-box-co{
    position:absolute;
    // top:1px;
    top:2.5px
  }
}

.bbovkk{
  
  position:absolute;
      font-size: 22px !important;
    top: 6px;
    right: -5px;
}

.jjjbicvo{
      position: absolute;
    font-size: 18px;
    right: -6px;
    top: 4px;
}

.bbov{
  visibility:hidden
}

.set-icony{
  position: absolute;
  
    top: 1px;
    font-size: 16px;
    left: 5px;
}

.bbovy{
  position:absolute;
  // position: absolute;
  font-size: 18px;
  top: 5px;
  right: -4px;
}

.yyiconb{
  position: relative;
  display: inline-block;
  width: 20px;
  height:18.91px;

  .yyivo{
    visibility:hidden
    // position:absolute
  }
  .yyivot{
    position:absolute;
    left: 0;
    top: 2px;
  }
}
.ghn{
  margin-left:4px
}

.tyg {
  color: #223e43 !important;
  // margin-left: 3px;
      // font-weight: 550;
    font-size: 13px;
}
// .katal-icon.setting .kat-link{
//   color: #008296;
// }
.setting i {
  color: #008296 !important;
}
// .katal-icon .kat-link{
// }
.link-span {
  // color: #fff;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
  margin-right: 18px;
}

.p-icon {
  font-size: 14px;
}
.elselectbox {
  position: relative;
  cursor: pointer;
  margin-top: 4px;
  .select-mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 4px;
    // height: 35px;
    // background: yellow;
    width: 132px;
    // border-right: 1px solid var(--el-border-color);
    border-right: 1px solid #a8adae;
  }
}

::v-deep .el-table .el-table__cell {
  padding: 0;
}

::v-deep .el-table .cell {
  padding: 0;
}
::v-deep .el-checkbox {
  // --el-checkbox-input-border:rgb(0, 47, 54)
}

::v-deep .meSelect {
  height: 35px;
  --el-select-input-focus-border-color: #e4ecee;
  .el-input__inner {
    color: rgb(0, 47, 54);
    font-size: 13px;
  }
  .is-focus .el-input__wrapper {
    background: #e4ecee;
  }
}

.table-tool {
  height: 100%;
  display: flex;
  // align-items: center;
  padding-top: 7px;
}

.table-header-row {
  padding: 12px 14px;
  height: 80px;
  box-sizing: border-box;
  position: relative;
  color: #008296;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 1.5;
}

.table-header-row-info {
  box-sizing: border-box;
  color: rgb(102, 117, 117);
  cursor: pointer;
  display: inline-block;
  // font-family "Amazon Ember", Arial, sans-serif
  font-size: 13px;
  font-weight: 400;
  height: auto;
  line-height: 18px;
  text-align: left;
}

.table-header-row.active {
  background: #e3eced !important;
  border-bottom: 2px solid #008296;
}

.table-header-row-flex1 {
  height: 100%;
  flex: 1;
}

.db {
  display: flex;
}

.table-icon {
  font-size: 20px;
}

.table-header-row::before {
  content: "";
  width: 3px;
  height: 40px;
  background: #d5dbdb !important;
  // position: relative;
  position: absolute;
  left: -1px;
  top: 12px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.flex1 {
  flex: 1;
}

.navigation {
  display: flex;
  height: 46px;
  font-size: 14px;
  line-height: 20px;
  background-color: #f5f9fa;
  border-bottom: 1px solid #d5dbdb;
  align-items: center;
  padding-left: 29px;
}

.navigation a {
  color: inherit;
  text-decoration: none;
}

.navigation .fba-indicator {
  color: #667575;
  letter-spacing: 0.05px;
  height: 100%;
  display: flex;
  align-items: center;
}

.navigation .fba-indicator .arrow-forward {
  margin-left: 8px;
}

.navigation .loading {
  text-align: center;
  flex: 1;
}

.navigation .loading svg {
  height: 35px;
  width: 35px;
  animation: spin 0.75s 0s linear infinite;
  color: #002f36;
  fill: none;
  stroke-width: 1px;
  stroke: #002f36;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.navigation .fba-central-icons.arrow-forward {
  font-size: small;
}

.navigation li {
  cursor: pointer;
}

.navigation ul {
  list-style: none;
}

.navigation ul.main-menu {
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  margin-left: 12px;
}

.navigation ul.main-menu .main-item {
  height: 100%;
  position: relative;
  margin-right: 38px;
}

.navigation ul.main-menu .main-item .main-item-link {
  position: relative;
  top: 12px;
  padding-bottom: 2px;
  padding-left: 1px;
  padding-right: 1px;
}

.navigation ul.main-menu .main-item .fba-central-icons.expand-less {
  position: relative;
  top: 1px;
  font-size: 20px;
  transform: rotate(180deg);
}

.navigation ul.main-menu .main-item.active .main-item-link,
.navigation ul.main-menu .main-item.active:hover .main-item-link {
  border-bottom: 4px solid #00a4b4;
}

.navigation ul.main-menu .main-item:hover .main-item-link {
  border-bottom: 2px solid #00a4b4;
}

.navigation ul.main-menu .main-item.active .main-item-link a {
  font-weight: 700;
}

.navigation ul.main-menu .main-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navigation ul.main-menu .sub-menu {
  visibility: hidden;
  top: 46px;
  left: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  background-color: #fff;
  opacity: 0;
  transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 100;
  border: 1px solid #aab7b8;
}

.navigation ul.main-menu .sub-menu li {
  padding: 0;
  margin: 0;
  display: flex;
}

.navigation ul.main-menu .sub-menu li:hover {
  background-color: #f5f9fa;
}

.navigation ul.main-menu .sub-menu li a {
  white-space: nowrap;
  flex: 1;
  padding: 8px 10px;
}

.navigation ul.main-menu .sub-menu li span {
  background-color: #008296;
  color: #fff;
  padding: 4px 5px;
  text-align: center;
  border-radius: 13px;
  height: min-content;
  margin: auto;
  margin-right: 5px;
}

.fba-central-icons {
  font-family: "FBA Central Icons";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

// .gg {
@font-face {
  font-family: "FBA Central Icons";
  src: url(/fonts/katal-flo-icon-font._CB451345079_.eot);
  src: url(/fonts/katal-flo-icon-font._CB451345079_.woff2) format("woff2"),
    url(/fonts/katal-flo-icon-font._CB451345079_.woff) format("woff"),
    url(/fonts/katal-flo-icon-font._CB495438283_.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
}

.page-header-box {
  padding: 2px 18px 18px;
  // width: 100vw;
  // box-sizing: border-box;
  // overflow: hidden;
}

.page-header {
  display: flex;
  padding-left: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.page-header .item {
  flex: 1;
  text-align: left;
}

.page-header .item h2 {
  display: inline-block;
  margin-right: 20px;
}

.page-header .item span.sperator {
  margin: 0 10px;
}

.page-header .item.right {
  flex: none;
}

.buttons {
  display: flex;
  align-items: center;
}

.buttons kat-toggle {
  padding-left: 10px;
  padding-top: 3px;
}

.buttons kat-icon {
  margin-top: 5px;
  margin-left: 10px;
}

.buttons span {
  padding-left: 10px;
}

.buttons .preference {
  display: flex;
  align-items: center;
  color: #008296;
}

.buttons .preference .table-preference-text {
  padding-left: 5px;
}

.banners kat-alert {
  margin-bottom: 10px;
}

// }
// `,
// z=w.iv`:host {
//   font-family: "Amazon Ember", Arial, sans-serif;
//   color: #002f36;
//   -webkit-user-select: none;
//   -moz-user-select: none;
//   -ms-user-select: none;
//   user-select: none;
// }
</style>

<style lang="scss">



.buyy {
  .el-input__wrapper {
    box-shadow: none !important;
    border: 1px solid rgb(170, 184, 184);
    color: rgb(0, 47, 54);
    background: #fff;
  }
}
.bg-select {
  .el-input__wrapper {
    background: rgb(227, 236, 237);
    color: rgb(0, 47, 54);
  }
  svg {
    color: rgb(0, 47, 54) !important;
  }
}
.t-input {
  .el-input-group__prepend {
    box-shadow: none;
    border: 1px solid rgb(170, 183, 184);
    border-right: none;
    background: rgb(250, 250, 250);
    width: 27.22px;
    box-sizing: border-box;
  }
  .el-input__wrapper {
    border: 1px solid rgb(170, 183, 184);

    box-shadow: none !important;
  }
}
// .el-input.is-disabled .el-input__wrappe

.is-disabled .el-input__wrapper {
  background: #fff !important;
}

.el-input.is-disabled .el-input__inner {
  -webkit-text-fill-color: #223e43;
  color: #223e43 !important;
}

.el-pagination-box svg {
  color: rgb(0, 47, 54);
}
.el-pagination-box {
  .btn-prev.is-first,.is-active.number,.btn-next.is-last{
    background: transparent;
  }
}

.el-table.is-scrolling-middle
  .el-table-fixed-column--left.is-last-column::before {
  box-shadow: none !important;
}
.el-pager {
  --el-pagination-hover-color: #005a68;
}
.el-table {
  --el-table-row-hover-bg-color: #fff;
  --el-table-header-bg-color: #fafafa;
}
.el-select-dropdown__item {
  border-bottom: 1px solid var(--el-border-color);
  font-size: 13px;
  color: rgb(0, 47, 54);
}
.el-select-dropdown__list {
  padding: 0 !important;
}
.el-select-dropdown__item.selected {
  border: 2px solid #2f6f79;
  color: rgb(0, 47, 54);
}
.el-table.is-scrolling-right
  .el-table-fixed-column--left.is-last-column::before {
  box-shadow: none;
}
.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}


.el-table .el-checkbox__inner{
      border: 1px solid #000;
    border-top-color: #6cb5c0;
    border-right-color: #6eb6c1;
    border-bottom-color: #57abb7;
    border-left-color:  #57abb7;
    width: 16px;
    height: 16px;
}

.el-table .el-table_1_column_1{
  .cell{
    position: absolute;
    top:13.76px;
    left: 50%;
    transform: translateX(-50%);
  }


}

.el-table {
    tbody {
      .el-table__cell{
          vertical-align: top !important;
      }
    }
    thead{
      .el-table_1_column_1{

    .cell{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  } 
      }

  }
}
</style>
